<!DOCTYPE html>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>行政区划管理</title>
<jsp:include page="/common/head.jsp"></jsp:include>
<link
	href="<%=request.getContextPath()%>/static/plugin/zTree/css/zTreeStyle/zTreeStyle.css"
	rel="stylesheet">
<script
	src="<%=request.getContextPath()%>/static/plugin/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<style>
    #content {
        position: absolute;
        top: 0;
        left: 240px;
        right: 10px;
        bottom: 0;
        box-sizing: border-box;
    }
    ul.ztree {
        width: 240px;
    }
</style>
</head>
<body class="iframe-page">
    
    <div class="tree-wrap">
	    <div class="tree-title">行政区划列表</div>
	    <div class="tree-content">
	       <ul id="regionList" class="ztree"></ul> 
	    </div>
   </div>
    
    <div id="content">
        <iframe id="regionFrame" frameborder="0" style="width:100%;height:100%" src="<%=request.getContextPath()%>/sys/region/initStat"></iframe>
     </div>
     
	<div id="regionMenu" style="width: 140px;">
		<div id="add" >新建子节点</div>
		<div id="edit" >编辑节点</div>
		<div id="delete">删除节点</div>
	</div>
	
	<script>
     var REGION_URL = {
    		 INIT_MAIN: basePath + '/sys/region/init',
    		 INIT_ADD: basePath + '/sys/region/initAdd',
    		 INIT_EDIT: basePath + '/sys/region/initEdit',
    		 INIT_VIEW: basePath + '/sys/region/initView',
    		 INIT_STAT: basePath + '/sys/region/initStat',
    		 DELETE: basePath + '/sys/region/delete',
    		 GET_TREE: basePath + '/sys/region/list'
     };
     var regionFrame = document.getElementById('regionFrame'),
         currentNode = null;
     
     // ztree 初始化设置 
     var setting = {  
         data: {
                simpleData: {
                    enable: true,
                    idKey: 'id',  // idkey
                    pIdKey: 'pId' // 父IDkey
                },
                key: {
                    url: 'zUrl' // url 字段名,解决字段名冲突问题
                }
            },
          callback: {
              onClick: viewResource,
              onRightClick: showResourceMenu
          },
          async: {
              enable: true
          }
     },
     ztree;
     
     $(function() {
    	 // 初始化功能树
    	 initTree();
         
         $('#regionMenu').menu({
             onClick: function(item){
             	if (item.id == 'add') {
             		addResource(currentNode);
             	} else if (item.id == 'edit') {
             		editResource(currentNode);
             	} else if (item.id == 'delete') {
             		deleteRegion(currentNode);
             	}
             }
         }); 
     });
     
     function initTree() {
         $.ajax({
            url: REGION_URL.GET_TREE + '?random=' + Math.random() * 1000000,
            success: function(data) {
            	ztree = $.fn.zTree.init($("#regionList"), setting, data);
            	expandNode();
            }
         });
     }
     

     // 展开树节点
     function expandNode() {
    	var nodeId = '${param.expandId}',
    	    node;
   	    if (nodeId) {
   	    	// 获取需要自动展开的节点
   	    	node = ztree.getNodeByParam('id', nodeId, null);
   	    } else {
   	    	// nodeId为空,展开根节点
   	    	node = ztree.getNodeByParam('pId', null, null);
   	    }
   	    if (node){
   	     // 如果该节点不包含子节点,则展开其父节点
   	        if (!node.isParent) {
   	           node = node.getParentNode(); 
   	        }
   	    }
   	    ztree.expandNode(node, true, false, true);
     }
     
     // 查看行政区划
     function viewResource(event, treeId, treeNode) {
     	var url = REGION_URL.INIT_VIEW + '?id=' + treeNode.id;
     	
     	if (!treeNode.pId) {
     		url = REGION_URL.INIT_STAT;
     	}
     	regionFrame.src = url;
     }
     // 添加行政区划
     function addResource(node) {
     	 regionFrame.src = REGION_URL.INIT_ADD + '?pId=' + node.id + '&level=' + node.level;;
     }
     
     // 编辑行政区划
     function editResource(node) {
         regionFrame.src = REGION_URL.INIT_EDIT+'?id='+node.id;
     }
     
     // 删除行政区划
     function deleteRegion(node) { 
        $.sdialog({
            type: 'confirm',
            msg: '您确定要删除<'+node.name+'>节点吗? 删除时会将该节点下的子节点一并删除',
            onConfirm: function(result) {
                if(result){
                 $.sajax({
                	    url: REGION_URL.DELETE+'?id='+node.id,
                        onLoadSuccess: function (data) {
                            $.stip({
                               type:'ok',//显示类型 有info、 ok、 danger
                               text: '删除成功！',
                               onBeforeHide: function () {
                                  refreshPage(node.pId); 
                              }
                           });
                        }
                    });
                }
            }
        });
        
     }
     
     
     
     
     
     // 显示右键菜单
     function showResourceMenu(event, treeId, treeNode) {
     	// 通过treeNode判断是否是在节点上右键
     	if (treeNode) {
     		if ( !treeNode.pId ){
                $('#regionMenu').menu("disableItem",$('#regionMenu').menu("findItem",'删除节点').target);
             } else {
                $('#regionMenu').menu("enableItem",$('#regionMenu').menu("findItem",'删除节点').target);
             }
     		currentNode = treeNode;
     		ztree.selectNode(currentNode);
            $('#regionMenu').menu('show',{left:event.pageX, top: event.pageY});	
     	}
     }
     
     // 刷新页面, nodeId为初始化页面时需要自动展开的节点ID
     function refreshPage(nodeId, continueAdd, level) {
         nodeId = nodeId || '';
         if (continueAdd){
            var node = ztree.getNodeByParam("id", nodeId,null);
            ztree.setting.async.url = REGION_URL.GET_TREE + "?pId=" + nodeId;
            node.isParent = true,
            ztree.updateNode(node);
            ztree.reAsyncChildNodes(node, "refresh");
         } else {
            location.href = REGION_URL.INIT_MAIN+'?expandId='+nodeId;
         }
     }
     </script>
</body>
</html>
